/*
 * @Description:
 * @Author: lcz
 * @LastEditors: lcz
 * @LastEditTime: 2025-07-05 15:56:01
 */
import React from "react";
import { Space, Table, Tag } from "antd";
import type { TableProps } from "antd";

import { useVirtualList } from "@/hooks/common/useVirtualList";
import { useWhyDidYouUpdate } from "ahooks";
import styles from "./index.module.scss";

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}

const columns: TableProps<DataType>["columns"] = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    render: text => <a>{text}</a>
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  },
  {
    title: "Tags",
    key: "tags",
    dataIndex: "tags",
    render: (_, { tags }) => (
      <>
        {tags.map(tag => {
          let color = tag.length > 5 ? "geekblue" : "green";
          if (tag === "loser") {
            color = "volcano";
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </>
    )
  },
  {
    title: "Action",
    key: "action",
    render: (_, record) => (
      <Space size='middle'>
        <a>Invite {record.name}</a>
        <a>Delete</a>
      </Space>
    )
  }
];
const data: DataType[] = Array.from({ length: 1000 }, (_, index) => ({
  key: `${index} + 1`,
  name: "John Brown" + index,
  age: 32 + index,
  address: "New York No. 1 Lake Park" + index,
  tags: ["nice", "developer"]
}));
const VList = () => {
  const {
    actualRenderData,
    cacheStartIndex,
    size: DVirtualSize
  } = useVirtualList({
    data: data, // 列表项数据
    scrollContainer: ".ant-table-body", // 滚动容器
    actualHeightContainer: ".ant-table-body", // 渲染实际高度的容器
    translateContainer: ".ant-table-tbody", // 需要偏移的目标元素,
    itemContainer: ".ant-table-row", // 列表项
    itemHeight: 56, // 列表项的大致高度
    size: 8 // 单次渲染数量
  });
  useWhyDidYouUpdate("list", {
    actualRenderData,
    cacheStartIndex,
    size: DVirtualSize
  });
  return (
    <div className={styles["dt-table"]}>
      <Table<DataType>
        columns={columns}
        pagination={false}
        dataSource={actualRenderData}
        // style={{ height: data.length * 56 }}
        scroll={{ x: "max-content", y: 55 * 5 }}
      />
    </div>
  );
};
export default VList;
